import Message from './Message'
import defaultImg from '@/assets/images/200.png'// 导入加载失败后的默认图片

// 1 - 这句话的意思是,在当前文件夹下,也就是library文件下所有vue文件的名字或路径,

const importFn = require.context('./', false, /\.vue$/)

const PictureLazyLoading = (app) => {
  app.directive('lazyload', {
    mounted (el, binding) {
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          observer.unobserve(el)
          el.onerror = () => {
            el.src = defaultImg
          }
          el.src = binding.value
        }
      }, {
        threshold: 0.01
      })
      observer.observe(el)
    }
  })
}

// 2 - 存在变量importFn中,importFn.keys()就是每个vue文件的名字或路径
export default {
  install (app) {
    // 3 - importFn.keys()是一个存着所有vue文件的名字或路径的数组,把他们遍历出来
    importFn.keys().forEach(cpath => {
      // 4 - cpath表示单个vue组件文件的路径
      // 5 - component其实就是加载成功的组件的选项(组件),因为每个组件都是有export default导出
      const component = importFn(cpath).default
      // 6 - 定义全局组件,组件名就是每个vue组件中name取的名字,后面是每个组件
      app.component(component.name, component)
    })

    PictureLazyLoading(app) // 图片懒加载自定义指令

    // 如果你想挂载全局的属性，能够通过组件实例调用的属性   this.$message
    app.config.globalProperties.$message = Message// 原型函数
  }
}
